<template>
  <div class="pages_content table">
    <el-container>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <span v-show="!showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
            </span>
            <span v-show="showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
            </span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">订单编号</span>
                <el-input v-model="tableParam.orderNo" style="width: 220px;" placeholder="请输入" clearable @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">工程名称</span>
                <el-input v-model="tableParam.engineeringName" style="width: 220px;" placeholder="请输入" clearable @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="tableParamType = true">高级搜索</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div v-loading="tableLoading" class="card_info">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :min-width="item.width" :fixed="(item.label =='生产调整')?'right':false">
                  <template slot-scope="scope">
                    <div v-if="item.label == '订单编号'">
                      <el-link class="table_link" :underline="false" @click="lookFun(scope.row)">{{scope.row.orderNo}}</el-link>
                    </div>
                    <div v-else-if="item.label == '浇筑方式'">
                      <div>{{scope.row.pouringMethod | pouringMethodFilter}}</div>
                    </div>
                    <div v-else-if="item.label == '安排运输'">
                      <el-link class="table_link" :underline="false" @click="ToViewFun3(scope.row,scope.$index)">选择</el-link>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 查看详情 -->
    <el-dialog v-dialogDrag :visible.sync="lookType" width="1000px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">订单基本信息</span>
      <div class="dialoginfo">
        <div class="form-title" style="margin-bottom:10px;">订单号：{{formData4.orderNo}}</div>
        <el-form :inline="true" :model="formData4" label-width="100px">
          <el-form-item>
            <span slot="label">工程名称：</span>
            <div style="width: 190px;">{{formData4.engineeringName}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">浇筑部位：</span>
            <div style="width: 190px;">{{formData4.structuralParts}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">下单时间：</span>
            <div style="width: 190px;">{{formData4.createTime}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">订单提交人：</span>
            <div style="width: 190px;">{{formData4.createUserName}}</div>
          </el-form-item>
          <el-form-item prop="person">
            <span slot="label">联系人：</span>
            <div style="width: 190px;">{{formData4.person}}</div>
          </el-form-item>
          <el-form-item prop="phoneNum">
            <span slot="label">联系电话：</span>
            <div style="width: 190px;">{{formData4.phoneNum}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">强度等级：</span>
            <div style="width: 190px;">{{formData4.strengthGrade}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">性能等级：</span>
            <div style="width: 190px;">{{formData4.performanceGrade}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">材料等级：</span>
            <div style="width: 190px;">{{formData4.meterialRequirements}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">特殊要求：</span>
            <div style="width: 190px;">{{formData4.specialRequirements}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">其他要求：</span>
            <div style="width: 190px;">{{formData4.otherRequirements}}</div>
          </el-form-item>
          <el-form-item prop="pouringMethod">
            <span slot="label">浇筑方式：</span>
            <div style="width: 190px;">{{formData4.pouringMethod | pouringMethodFilter}}</div>
          </el-form-item>
          <el-form-item prop="pouringTime">
            <span slot="label">浇筑时间：</span>
            <div style="width: 190px;">{{formData4.pouringTime}}</div>
          </el-form-item>
          <el-form-item prop="pouringHigh">
            <span slot="label">泵送高度：</span>
            <div style="width: 190px;">{{formData4.pouringHigh}}</div>
          </el-form-item>
          <div>
            <el-form-item label-width="150px">
              <span slot="label">客户备注：</span>
              <div style="width: 100%;">{{formData4.remark}}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <span slot="label">备注：</span>
              <div style="width: 100%;">{{formData4.orderRemark}}</div>
            </el-form-item>
          </div>
          <div class="hr" style="margin:20px;"></div>
          <el-form-item prop="graphicNum">
            <span slot="label">产品名称：</span>
            <div style="width: 190px;">{{formData4.productName}}</div>
          </el-form-item>
          <el-form-item prop="noteName">
            <span slot="label">票单名称：</span>
            <div style="width: 190px;">{{formData4.noteName}}</div>
          </el-form-item>
          <el-form-item prop="pointId">
            <span slot="label">供应站点：</span>
            <div style="width: 190px;">{{formData4.point}}</div>
          </el-form-item>
          <el-form-item prop="settleId">
            <span slot="label">结算方式：</span>
            <div style="width: 190px;">{{formData4.settleName}}</div>
          </el-form-item>
          <el-form-item prop="firstSupplyId">
            <span slot="label">富余量：</span>
            <div style="width: 190px;">{{formData4.lossNum}}</div>
          </el-form-item>
          <el-form-item prop="firstSupplyId">
            <span slot="label">前场工长：</span>
            <div style="width: 190px;">{{formData4.foreman}}</div>
          </el-form-item>
          <el-form-item v-show="remarkList.length>0">
            <span slot="label">历史备注</span>
            <div v-for="(v,k) in remarkList" :key="k">{{v.planRemark}}</div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="lookType = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 选择表格 -->
    <el-dialog v-dialogDrag :visible.sync="chooseType" width="1000px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">选择罐车合同</span>
      <div class="dialoginfo">
        <div>
          <el-table ref="multipleTable" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="toViewList2" tooltip-effect="dark">
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row" @change="radioFun(scope.row)">{{""}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="合同编号" align="center" prop="contractNumber"></el-table-column>
            <el-table-column label="合同单位" align="center" prop="supplierName"></el-table-column>
            <el-table-column label="合同等级" align="center" prop="cooperationClass"></el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="chooseType = false">关 闭</el-button>
        <el-button class="bottom_all" @click="radioAddFun()">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script >
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
  plansaveArrange
} from "@/api/smart/schedul/outsourcing.js";
import { planRemark } from "@/api/smart/schedul/c.js";
import {
  getContractVoList,
  plan_detail,
  operation_detail,
} from "@/api/smart/schedul/d.js";
export default {
  mixins: [mixin],
  data() {
    return {
      queryPage: queryPage,
      toViewList2: [],
      remarkList: [],
      formData4: {},
      lookType: false,
      chooseType: false,
      tableData: [],
      table: [
        {
          label: "订单编号",
          width: "220",
          prop: "orderNo",
          status: true,
        },
        {
          label: "浇筑时间",
          width: "160",
          prop: "pouringTime",
          status: true,
        },
        {
          label: "产品名称",
          width: "160",
          prop: "productName",
          status: true,
        },
        {
          label: "计划生产量（方）",
          width: "140",
          prop: "pouringNum",
          status: true,
        },
        {
          label: "浇筑方式",
          width: "120",
          prop: "",
          status: true,
        },
        {
          label: "工程名称",
          width: "160",
          prop: "engineeringName",
          status: true,
        },
        {
          label: "工程地址",
          width: "160",
          prop: "place",
          status: true,
        },
        {
          label: "安排运输",
          width: "120",
          prop: "",
          status: true,
        },
        {
          label: "运输队",
          width: "120",
          prop: "tankUnit",
          status: true,
        },
      ],
      radio: '',
      indexRow: '',
    };
  },
  async created() {
    this.gettableData();
  },
  methods: {
    lookFun(e) {
      this.lookType = true;
      /**历史备注 */
      planRemark({ planId: e.id }).then((res) => {
        this.remarkList = res.data
      })
      plan_detail({ id: e.id }).then((res) => {
        //获取订单信息
        this.formData4 = res.data;
        if (this.formData4.performanceGrade) {
          this.formData4.performanceGrade = JSON.parse(this.formData4.performanceGrade).map((v) => {
            return v.name
          });
          this.formData4.performanceGrade = this.formData4.performanceGrade.join(',')
        } else {
          this.formData4.performanceGrade = '';
        }
        if (this.formData4.meterialRequirements) {
          this.formData4.meterialRequirements = JSON.parse(this.formData4.meterialRequirements).map((v) => {
            return v.name
          });
          this.formData4.meterialRequirements = this.formData4.meterialRequirements.join(',')
        } else {
          this.formData4.meterialRequirements = '';
        }
        if (this.formData4.specialRequirements) {
          this.formData4.specialRequirements = JSON.parse(this.formData4.specialRequirements).map((v) => {
            return v.name
          });
          this.formData4.specialRequirements = this.formData4.specialRequirements.join(',')
        } else {
          this.formData4.specialRequirements = '';
        }
        if (this.formData4.otherRequirements) {
          this.formData4.otherRequirements = JSON.parse(this.formData4.otherRequirements).map((v) => {
            return v.name
          });
          this.formData4.otherRequirements = this.formData4.otherRequirements.join(',')
        } else {
          this.formData4.otherRequirements = '';
        }
        operation_detail({
          //获取作业安排信息
          planId: e.id,
          enginnerId: e.engineeringId,
        }).then((res2) => {
          let obj = {
            point: res2.data.pointName,
            settle: "",
            lossNumId: res2.data.lossNumId,
            remark2: res2.data.remark,
            settleName: res2.data.settleName,
            settleId: res2.data.settleId,
            lossNum: res2.data.lossNum,
            foreman: res2.data.foreman,
          };
          this.formData4 = { ...this.formData4, ...obj };
        });
      });
    },
    init() {
      /*重置数据*/
      this.$data.tableParam = this.$options.data().tableParam;
      this.tableParam.orderNo = ''
      this.tableParam.engineeringName = ''
      this.gettableData();
    },
    //运输弹出列表
    async ToViewFun3(row) {
      this.chooseType = true;
      this.indexRow = row
      this.radio = {};
      let id = "";
      this.ToViewFun3Name = "选择罐车合同";
      await getContractVoList({
        stationId: row.stationId,
        contractTypeId: 2,
      }).then((res) => {
        this.toViewList2 = res.data;
      });
      id = row.transContractNo;
      this.toViewList2.forEach((v) => {
        if (v.contractNumber == id) {
          this.radio = v;
          console.log(this.radio);
        }
      });
    },
    radioFun(res) {
      this.radio = res;
    },
    radioAddFun() {
      let json = {
        planId: this.indexRow.id, // 计划id
        contractNo: this.radio.contractNumber, // 合同编号
        tankUnit: this.radio.supplierName,// 运输单位
        tankUnitId: this.radio.supplierId,// 运输单位id
      }
      plansaveArrange(json).then((res) => {
        if (res.code == 1001) {
          this.chooseType = false;
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.gettableData();
        }
      })
    },
  },
  filters: {
    pouringMethodFilter(e) {
      if (e) {
        e = JSON.parse(e)
        let table = e.map((res) => res.name)
        let text = table.join('、')
        return text
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
